<script setup lang="ts">
import { graphic } from 'echarts'
import useEcharts, { type EChartsOption } from '~/composables/chart'
import defaults from './default-chart-option'

const props = defineProps<{
  data: { title: string, dataList: { key: string, val: string }[] }
}>()

const { chartRef, setOption } = useEcharts()

const option = computed<EChartsOption>(() => {
  return {
    title: {
      text: props.data.title,
      textStyle: {
        fontSize: 14,
      },
      left: 0,
      top: 0,
    },
    tooltip: { ...defaults.tooltip, axisPointer: { type: 'cross' } },
    grid: { ...defaults.grid, top: 50, left: 20, right: 20 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.data.dataList.map(item => item.key),
      axisLabel: {
        color: 'rgba(255,255,255,0.8)',
      },
      axisLine: { show: false },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: 'rgba(169, 208, 239, 0.8)',
      },
      axisLine: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(115, 162, 255, 0.2)',
        },
      },
    },
    series: [
      {
        type: 'line',
        data: props.data.dataList.map(v => v.val),
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 5,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(23, 230, 255, 1)' },
            { offset: 1, color: 'rgba(46, 137, 250, 1)' },
          ]),
        },
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(23, 66, 123, 1)' },
            { offset: 0.2, color: 'rgba(23, 66, 123, 1)' },
            { offset: 0.6, color: 'rgba(23, 66, 123, 0.8)' },
            { offset: 1, color: 'rgba(23, 66, 123, 0)' },
          ]),
        },
      },
    ],
    dataZoom: [
      { type: 'inside' },
    ],
  }
})

watch([option, chartRef], () => {
  setOption(option.value)
}, { deep: true })

onMounted(() => {
  setOption(option.value)
})
</script>

<template>
  <div class="h-full w-full">
    <div ref="chartRef" style="width: 100%; height: 100%;" />
  </div>
</template>
